<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>修改账号信息</title>
    <!--浏览器小图标-->
    <link rel="shortcut icon" href="/img/favicon.png">
    <!--自定义样式-->
    <link rel="stylesheet" href="/css/index.css">
    <!-- 引入Element UI样式 -->
    <link rel="stylesheet" href="/element/element-ui.css">
</head>
<body>
<div>
    <el-container>
        <!--自定义标签-->
        <el-header style="position: fixed;width: 100%;z-index: 1">
            <index-header></index-header>
        </el-header>
        <el-main>
            <el-row>
                <el-col offset="2" span="20">
                    <el-row style="margin-top: 55px">
                        <el-col span="4">
                            <index-left-card></index-left-card>
                        </el-col>
                        <el-col span="20" v-loading="loading">
                            <!--右边卡片-->
                            <el-card shadow="hover">
                                <!--页面内容-->
                                <el-row>
                                    <el-col span="8">
                                        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
                                            <el-form-item label="账号" prop="username">
                                                <span>{{ruleForm.username}}</span>
                                            </el-form-item>
                                            <el-form-item label="姓名" prop="nickname">
                                                <el-input v-model="ruleForm.nickname"></el-input>
                                            </el-form-item>
                                            <el-form-item label="生日" prop="birthday">
                                                <el-date-picker value-format="yyyy-MM-dd" v-model="ruleForm.birthday" type="date" placeholder="选择日期"></el-date-picker>
                                            </el-form-item>
                                            <el-form-item label="性别" prop="gender">
                                                <el-switch v-model="ruleForm.gender"></el-switch>
                                            </el-form-item>
                                            <el-form-item label="手机" prop="phone">
                                                <el-input v-model="ruleForm.phone"></el-input>
                                            </el-form-item>
                                            <el-form-item label="邮箱" prop="email">
                                                <el-input v-model="ruleForm.email"></el-input>
                                            </el-form-item>
                                            <el-form-item label="地址" prop="address">
                                                <el-input v-model="ruleForm.address"></el-input>
                                            </el-form-item>
                                            <el-form-item label="职业" prop="job">
                                                <el-input v-model="ruleForm.job"></el-input>
                                            </el-form-item>
                                            <el-form-item>
                                                <el-button type="primary" @click="submitForm()">保存信息</el-button>
                                            </el-form-item>
                                        </el-form>
                                    </el-col>
                                </el-row>
                            </el-card>
                        </el-col>
                    </el-row>
                </el-col>
            </el-row>
        </el-main>
        <!--自定义标签-->
        <el-footer>
            <index-footer></index-footer>
        </el-footer>
    </el-container>
</div>
</body>
<!-- 引入Vue和Element UI库 -->
<script src="/js/vue.js"></script>
<script src="/element/element-ui.js"></script>
<!--引入axios框架文件-->
<script src="/js/axios.js"></script>
<!--引入自定义header-->
<script src="/js/index-header.js"></script>
<!--引入自定义footer-->
<script src="/js/index-footer.js"></script>
<!--引入自定义卡片card-->
<script src="/js/index-left-card.js"></script>
<script>
    let v = new Vue({
        el: 'body>div',
        data: {
            loading:false,
            ruleForm: {
                username: '',
                nickname:'',
                birthday:'',
                gender:'',
                phone:'',
                email:'',
                address:'',
                job:''
            },
            userInfo:{},
            rules: {
                nickname: [
                    { required: true, message: '请输入姓名', trigger: 'blur' },
                    { min: 2, max: 5, message: '长度在 2 到 5 个字符', trigger: 'blur' }
                ],
                phone:[
                    { required: true, message: '请输入手机号', trigger: 'blur' },
                    { pattern: /^(?:(?:\+|0{0,2})86\-?)?1[3-9]\d{9}$/, message: "手机号格式不正确", trigger: "blur" }
                ],
                email:[
                    { required: true, message: '请输入邮箱', trigger: 'blur' },
                    { pattern: /^[\w-]+(\.[\w-]+)*@([\w-]+\.)+[a-zA-Z]{2,7}$/, message: "邮箱格式不正确", trigger: "blur" }
                ],
            },
        },
        methods: {
            //更新表单事件
            submitForm() {
                if (v.ruleForm.gender){
                    v.ruleForm.gender=1;
                }else {
                    v.ruleForm.gender=0;
                }
                axios.post('/pa/users/updateUserInfo',v.ruleForm,{headers: {token: localStorage.getItem("localJwt")}}).then(function (res) {
                    if (res.data.code===1){
                        v.getUserInfo();
                        v.$message.success("信息保存成功！");
                    }else {
                        v.$message.info("信息保存失败，请稍后尝试");
                    }
                })
            },
            //获取用户信息
            getUserInfo(){
                let userInfo={job:'',address:'',birthday:'',gender:'',email:'',nickname:'',password:'',phone:'',username:''}
                axios.get("/pa/users/getUserInfo/"+localStorage.getItem("currentUsername"),{headers: {token: localStorage.getItem("localJwt")}}).then(function (res) {
                    if (res.data.code===1){
                        this.userInfo=res.data;
                        userInfo.job=res.data.data.job;
                        userInfo.address=res.data.data.address;
                        userInfo.birthday=res.data.data.birthday;
                        if (res.data.data.gender===0){
                            userInfo.gender=false;
                        }else {
                            userInfo.gender=true;
                        }
                        userInfo.email=res.data.data.email;
                        userInfo.password=res.data.data.password;
                        userInfo.phone=res.data.data.phone;
                        userInfo.username=res.data.data.username;
                        userInfo.nickname=res.data.data.nickname;
                    }
                })
                this.ruleForm=userInfo;
            }
        },
        mounted(){
            this.getUserInfo();
        },
    })
</script>
</html>